<template>
  <view class="easyCLearSnowPack">

    <child-header-bar :childTitle="childTitle" @getMarginTop="getMarginTop"></child-header-bar>
    <view class="easyClearSnowPack-content" :style="[{'top': top + 'px'}]">
      <view class="ec-tab">
        <view class="ect-item">
          <hpy-form-select :title="typeTitle" @change="changeTypeVal()" :dataList="typeList" text="typeText"
            name="typeValue" v-model="selectParam.bussinessType" />
        </view>
        <view class="ect-item">
          <hpy-form-select :title="isSelfEmployedTitle" @change="changeIsSelfEmployedVal()"
            :dataList="isSelfEmployedList" text="name" name="id" v-model="selectParam.roleFlag" />
        </view>
      </view>
      <view class="ec-content">
        <view class="hotel-box">
          <view class="hotel-item" @click="toStoreIntro(item)" v-for="(item,index) in othersList" :key="index" style="width: 334rpx;">
            <!-- 是否自营 -->
            <view class="is-self-employed" v-if="item.roleFlag == 'snow_filed_child'">
              <image src="/myPackageA/static/easyClear/self.png" mode=""></image>
              <view class="ise-title">
                自营
              </view>
            </view>
            <view class="ht-img">
              <image :src="item.bussinessImg" mode=""></image>
              <view class="hi-distance">
                距离{{item.slopeName.trim()}}{{item.distanceOf ? item.distanceOf : 0}}公里
              </view>
            </view>
            <view class="hi-content">
              <view class="hi-name">
                {{item.bussinessName}}
              </view>
			  <view style="display: flex;flex-wrap: wrap" class="hi-label" >
              <view class="label-item" v-if="item.tag.length > 0" v-for="(item1,index) in item.tag" :key="index">
                {{item1}}
              </view>
			  <!-- 
              <view class="hi-label" v-if="item.childTag.length > 0" style="margin-left: 20rpx;">
                <view class="label-item" v-for="(item1,index1) in item.childTag" :key="index1">
                  {{item1}}
                </view>
              </view>
			  -->
			  </view>
            </view>
          </view>
          <i-divider v-if="othersList.length > 0" :loadingType="loadingType"></i-divider>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        top: 0,
        loadingType: 0, //加载文字类型
        childTitle: '一门清其他',
        typeTitle: '类别',
        isSelfEmployedTitle: '全部',
        selectParam: {
          pageSize: 10,
          pageNum: 1,
        },
        // 类别下拉列表
        typeList: [{
          typeText: '类别',
          typeValue: -1
        }, {
          typeText: '餐饮',
          typeValue: 2
        }, {
          typeText: '住宿',
          typeValue: 3
        }, {
          typeText: '交通',
          typeValue: 4
        }, {
          typeText: '教学',
          typeValue: 5
        }, {
          typeText: '雪具',
          typeValue: 6
        }, {
          typeText: '摄影',
          typeValue: 7
        }, {
          typeText: '服务',
          typeValue: 8
        }, {
          typeText: '其他',
          typeValue: 9
        }],
        isSelfEmployedList: [{
          name: '全部',
          id: -1
        }, { //自营下拉列表
          name: '自营',
          id: 'snow_filed_child'
        }, {
          name: '非自营',
          id: 'snow_filed_child_not'
        }],
        othersList: [],
        pageType: '',
        totalPage: 0
      }
    },
    onLoad(options) {
		console.log(options)
      if (options.type) {
        console.log(options.type)
        this.pageType = options.type
        this.selectParam.bussinessType = options.type
      }
      if (options.slopeId) {
        this.selectParam.slopeId = options.slopeId
      }
	  this.childTitle=this.typeList[options.type-1].typeText
      this.getBusinessList()
    },
    // 上拉分页
    onReachBottom() {
      this.selectParam.pageNum++;
      if (this.loadingType !== 0) {
        return false;
      }
      this.loadingType = 1;
      this.getBusinessList()
    },
    methods: {
		onShareAppMessage() {
		return {
		    title: '一门清其他',
		    imageUrl: this.img,
		  }
		},
		onShareTimeline() {
		  return {
		    title: '一门清其他',
		    imageUrl: this.img,
		  }
		},
      getBusinessList() {
        let _this = this
        wx.request({
          url: _this.$httpApi.install.businessList,
          method: 'GET',
          data: _this.selectParam,
          success(res) {
			   console.log('=====================')
            console.log(res)
            if (res.data.code == 200) {
              if (res.data.rows.length == 0) { //没有数据
                _this.loadingType = 2;
                uni.showToast({
                  title: '暂无数据',
                  icon: 'none',
                  duration: 2000
                })
                return;
              }
              _this.totalPage = Math.ceil(res.data.total / _this.selectParam.pageSize)
              // 不足分页数量
              if (_this.selectParam.pageNum >= _this.totalPage) {
                _this.loadingType = 2;
              } else {
                _this.loadingType = 0; //将loadingType归0重置
              }
              _this.othersList = _this.othersList.concat(res.data.rows)
              _this.getTag(res.data.rows)
            }
          },
        })
      },
      // 获取酒店标签
      getTag(list) {
        console.log(list)
        if (list.length > 0) {
          list.forEach(item => {
            if (item.tag !== null) {
              console.log('标签来了' + item.tag)
              item.tag = item.tag.split(',')
              item.childTag = item.tag.slice(1)
            } else {
              item.tag = []
              item.childTag = []
            }
          })
        }
      },
      // 动态接收导航栏高度
      getMarginTop(marginTop) {
        this.top = marginTop ? marginTop : 150
      },
      getParam(list, id) {
        let items = list.find(item => {
          return item.dictValue == id;
        });
        return items.name
      },
      toStoreIntro(item) {
        uni.navigateTo({
          url: '/myPackageA/pages/storeIntro/storeIntro?businessId=' + item.bussinessId
        })
      },
      // 类型弹出框
      changeTypeVal(e) {
        this.selectParam.pageNum = 1;
        if (e.value == -1) {
          Reflect.deleteProperty(this.selectParam, 'bussinessType')
        } else {
          this.selectParam.bussinessType = e.value
        }
		console.log(e.value)
			  this.childTitle=this.typeList[e.value-1].typeText
        this.othersList = []
        this.getBusinessList()
      },
      // 自营弹出框
      changeIsSelfEmployedVal(e) {
        this.selectParam.pageNum = 1;
        if (e.value == -1) {
          Reflect.deleteProperty(this.selectParam, 'roleFlag')
        } else {
          this.selectParam.roleFlag = e.value
        }
		
        this.othersList = []
        this.getBusinessList()
      },
    }
  }
</script>

<style>
  page {
    width: 100%;
    height: 100%;
    background-color: #F8FAFE;
  }
</style>
<style lang="scss">
  .easyClearSnowPack-content {
    width: 100%;
    position: absolute;

    .ec-tab {
      width: 100%;
      padding: 10rpx 40rpx;
      display: flex;

      .ec-title {
        font-size: 28rpx;
        color: #303030;
        max-width: 210rpx;
        overflow: hidden;
        /*超出部分隐藏*/
        white-space: nowrap;
        /*禁止换行*/
        text-overflow: ellipsis;
        /*省略号*/
      }

      .ec-img {
        width: 24rpx;
        height: 24rpx;
        background: #EAEDF2;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 17rpx;

        image {
          width: 20rpx;
          height: 20rpx;
        }
      }

      .ect-item {
        display: flex;
        align-items: center;
        justify-content: center;

        &:nth-child(n+2) {
          margin-left: 60rpx;
        }

      }
    }

    .ec-content {
      padding: 0 30rpx;

      .hotel-box {

        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .hotel-item {
          background: #FFFFFF;
          padding-bottom: 30rpx;
          margin-bottom: 20rpx;
          border-radius: 20rpx;
          position: relative;

          .is-self-employed {
            position: absolute;
            z-index: 99;
            right: 0;
            top: 0;
            width: 105rpx;
            height: 35rpx;
            background: linear-gradient(270deg, #FF3434 0%, #FFA163 100%);
            border-radius: 0rpx 19rpx 0rpx 19rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            image {
              width: 24rpx;
              height: 24rpx;

            }

            .ise-title {
              font-size: 22rpx;
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 400;
              color: #FFFFFF;
            }
          }

          .ht-img {
            width: 335rpx;
            height: 377rpx;
            background: #D6D6D6;
            border-radius: 20rpx 20rpx 0rpx 0rpx;
            position: relative;

            image {
              width: 100%;
              height: 100%;
              border-radius: 20rpx 20rpx 0rpx 0rpx;
            }

            .hi-distance {
              position: absolute;
              bottom: 10rpx;
              left: 10rpx;
              padding: 5rpx 17rpx;
              background: #303030;
              border-radius: 18rpx 18rpx 18rpx 18rpx;

              font-size: 24rpx;
              color: #88F79C;
            }
          }

          .hi-content {
            padding-left: 16rpx;

            .hi-name {
              font-size: 24rpx;
              font-weight: bold;
              margin-top: 10rpx;
              color: #464646;
            }

            .hi-grade {
              margin-top: 10rpx;
              padding: 4rpx 12rpx;
              background: #EFF1F4;
              border-radius: 18rpx 18rpx 18rpx 18rpx;
              font-size: 20rpx;
              color: #FF4E00;
              display: inline-block;
            }

            .hi-label {
              display: flex;
              margin-top: 10rpx;

              .label-item {
                background: #EFF1F4;
                border-radius: 18rpx 18rpx 18rpx 18rpx;
                font-size: 20rpx;
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 400;
                color: #91A4B2;
                padding: 4rpx 16rpx;
                margin: 3rpx;
              }
            }
          }
        }
      }
    }

  }
</style>